// 全局变量
let apiKey = '';
let selectedImage = null;

// DOM 元素获取
const apiKeyContainer = document.getElementById('api-key-container');
const chatContainer = document.getElementById('chat-container');
const apiKeyInput = document.getElementById('api-key');
const submitApiKeyBtn = document.getElementById('submit-api-key');
const chatMessages = document.getElementById('chat-messages');
const textInput = document.getElementById('text-input');
const fileInput = document.getElementById('file-input');
const uploadBtn = document.getElementById('upload-btn');
const sendBtn = document.getElementById('send-btn');
const typingIndicator = document.getElementById('typing-indicator');
const apiKeyDisplay = document.getElementById('api-key-display');

// 自适应输入框高度（按内容自动增高，限制在视口高度的一部分）
function autoResizeTextArea(el) {
    const minPx = 44; // 约等于1行高度
    const maxPx = Math.max(160, Math.floor(window.innerHeight * 0.3)); // 上限≈30vh
    el.style.height = 'auto';
    const newHeight = Math.min(el.scrollHeight, maxPx);
    el.style.height = newHeight + 'px';
    el.style.overflowY = el.scrollHeight > newHeight ? 'auto' : 'hidden';
}

// 初始化事件监听器
document.addEventListener('DOMContentLoaded', function() {
    // 确保初始不显示指示器
    hideTypingIndicator();

    // API Key 提交
    submitApiKeyBtn.addEventListener('click', function() {
        const key = apiKeyInput.value.trim();
        if (key) {
            apiKey = key;
            apiKeyContainer.style.display = 'none';
            chatContainer.style.display = 'flex';
            apiKeyDisplay.textContent = 'API 密钥已设置';
            
            // 发送欢迎消息（更新为《九州古今》的适龄介绍）
            addBotMessage("欢迎来到《九州古今》！这是面向中小学的中国地理与历史助教系统。我可以用浅显易懂的语言，结合地图方位、时间线与关键词，帮助你梳理知识点与易错点。你可以直接提问，或上传照片进行“看图说地理/历史”。例如：1）用简单语言介绍中国地形的三级阶梯；2）为什么新疆白天看起来更长？与经度和时区有什么关系？3）成都有哪些代表性美食，它们与当地自然环境有什么联系？");
        } else {
            alert('请输入有效的 API 密钥');
        }
    });

    // 导航：页面切换
    document.querySelectorAll('.nav-tab').forEach(tab => {
        tab.addEventListener('click', () => switchPage(tab.getAttribute('data-page')));
    });

    // 建议卡片/人物卡片：事件委托
    chatContainer.addEventListener('click', function(e) {
        const sugg = e.target.closest('.suggestion-card');
        if (sugg) {
            textInput.value = sugg.getAttribute('data-suggestion') || '';
            textInput.focus();
            autoResizeTextArea(textInput);
            return;
        }
        const fig = e.target.closest('.figure-card');
        if (fig) {
            sendFigurePrompt({
                name: fig.dataset.name,
                era: fig.dataset.era,
                focus: fig.dataset.focus
            });
        }
    });

    // 历史上的今天：一键生成提示
    const genBtn = document.getElementById('generate-today-btn');
    if (genBtn) {
        genBtn.addEventListener('click', () => {
            const today = new Date();
            const mm = String(today.getMonth() + 1).padStart(2, '0');
            const dd = String(today.getDate()).padStart(2, '0');
            const dateStr = `${mm}-${dd}`;
            const prompt = `请以“历史上的今天（${dateStr}）”为主题，面向中小学生，组合讲解以下三部分，每部分3条要点：
1）山河壮阔：与今天相关的自然地理/景观（含定位与形成原因简述）
2）古今逸闻：与今天相关的历史事件（时间线+地点+影响）
3）传奇人物：与今天相关或纪念的历史人物（生平线索/关键事件/地理关联/影响）
要求：语言简洁，条理清晰，可配合地图方位与时间线提示。`;
            textInput.value = prompt;
            textInput.focus();
            autoResizeTextArea(textInput);
        });
    }
    const genLandscapeBtn = document.getElementById('generate-landscape-btn');
    if (genLandscapeBtn) {
        genLandscapeBtn.addEventListener('click', generateLandscapeImage);
    }
    // 上传图片按钮点击
    uploadBtn.addEventListener('click', function() {
        fileInput.click();
    });

    // 文件选择改变
    fileInput.addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
            selectedImage = e.target.files[0];
            showImagePreview(selectedImage);
        }
    });

    // 发送按钮点击
    sendBtn.addEventListener('click', sendMessage);

    // 输入框回车发送
    textInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

    // 自动调整文本框高度
    textInput.addEventListener('input', function() {
        autoResizeTextArea(this);
    });

    // 初始计算一次
    autoResizeTextArea(textInput);
    // 窗口尺寸变化时重算上限
    window.addEventListener('resize', () => autoResizeTextArea(textInput));
});

// 页面切换
function switchPage(pageId) {
    document.querySelectorAll('.nav-tab').forEach(t => {
        const active = t.getAttribute('data-page') === pageId;
        t.classList.toggle('active', active);
        t.setAttribute('aria-selected', active ? 'true' : 'false');
    });
    document.querySelectorAll('.page-panel').forEach(p => {
        p.classList.toggle('active', p.getAttribute('data-page') === pageId);
    });
}

// 显示图片预览
function showImagePreview(file) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const imagePreview = document.createElement('div');
        imagePreview.className = 'image-preview-container';
        
        const img = document.createElement('img');
        img.src = e.target.result;
        img.className = 'image-preview';
        img.title = '点击查看大图';
        
        const removeBtn = document.createElement('span');
        removeBtn.className = 'remove-image';
        removeBtn.textContent = '×';
        removeBtn.addEventListener('click', function() {
            selectedImage = null;
            imagePreview.remove();
        });
        
        imagePreview.appendChild(img);
        imagePreview.appendChild(removeBtn);
        
        // 移除之前的预览（如果有）
        const existingPreview = document.querySelector('.image-preview-container');
        if (existingPreview) {
            existingPreview.remove();
        }
        
        // 添加到输入框下方
        const inputArea = document.querySelector('.input-area');
        inputArea.parentNode.insertBefore(imagePreview, inputArea.nextSibling);
        
        // 点击图片放大查看
        img.addEventListener('click', function() {
            const modal = document.createElement('div');
            modal.style.position = 'fixed';
            modal.style.top = '0';
            modal.style.left = '0';
            modal.style.width = '100%';
            modal.style.height = '100%';
            modal.style.backgroundColor = 'rgba(0,0,0,0.8)';
            modal.style.zIndex = '1000';
            modal.style.display = 'flex';
            modal.style.alignItems = 'center';
            modal.style.justifyContent = 'center';
            modal.style.padding = '20px';
            modal.style.cursor = 'pointer';
            
            const modalImg = document.createElement('img');
            modalImg.src = e.target.result;
            modalImg.style.maxWidth = '90%';
            modalImg.style.maxHeight = '90%';
            modalImg.style.objectFit = 'contain';
            modalImg.style.borderRadius = '8px';
            modalImg.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
            
            modal.appendChild(modalImg);
            document.body.appendChild(modal);
            
            modal.addEventListener('click', function() {
                document.body.removeChild(modal);
            });
        });
    };
    reader.readAsDataURL(file);
}

// 发送消息
function sendMessage() {
    const message = textInput.value.trim();
    if (!message && !selectedImage) {
        alert('请输入问题或上传图片');
        return;
    }
    
    // 显示用户消息
    addUserMessage(message);
    
    // 清空输入框并重置高度
    textInput.value = '';
    autoResizeTextArea(textInput);
    
    // 显示加载状态
    showTypingIndicator();
    
    // 调用AI模型
    callAIModel(message, selectedImage)
        .then(response => {
            hideTypingIndicator();
            addBotMessage(response);
            selectedImage = null;
            
            // 移除图片预览
            const preview = document.querySelector('.image-preview-container');
            if (preview) {
                preview.remove();
            }
        })
        .catch(error => {
            hideTypingIndicator();
            addErrorMessage(error.message || '发生错误，请重试');
        });
}

// 调用AI模型
async function callAIModel(text, imageFile) {
    try {
        let imageUrl = null;
        
        // 如果有图片，先上传图片
        if (imageFile) {
            const formData = new FormData();
            formData.append('file', imageFile);
            
            // 这里需要实际的图片上传服务，由于限制，我们模拟一个URL
            // 在实际应用中，你需要上传图片到服务器并获取URL
            imageUrl = URL.createObjectURL(imageFile);
        }
        
        // 准备请求数据
        const requestData = {
            model: "Qwen/Qwen3-VL-30B-A3B-Instruct",
            messages: [{
                role: "user",
                content: []
            }],
            max_tokens: 2048,
            temperature: 0.7,
            enable_thinking: false
        };
        
        // 添加文本内容
        if (text) {
            requestData.messages[0].content.push({
                type: "text",
                text: text
            });
        }
        
        // 添加图片内容
        if (imageUrl) {
            requestData.messages[0].content.push({
                type: "image_url",
                image_url: {
                    url: imageUrl
                }
            });
        }
        
        // 发送请求
        const response = await fetch("https://api-inference.modelscope.cn/v1/chat/completions", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + apiKey
            },
            body: JSON.stringify(requestData)
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const result = await response.json();
        
        // 返回AI回复
        if (result.choices && result.choices.length > 0) {
            return result.choices[0].message.content || "我没有找到相关信息";
        } else {
            return "我没有找到相关信息";
        }
        
    } catch (error) {
        throw new Error(`AI调用失败: ${error.message}`);
    }
}

async function generateImage(token, prompt) {
    try {
        // 发送请求
        const response = await fetch("https://api-inference.modelscope.cn/v1/images/generations", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + token,
            },
            body: JSON.stringify({
                model: "black-forest-labs/FLUX.1-Krea-dev", // 文生图模型 ID
                prompt: prompt // 文本提示
            })
        });

        // 检查HTTP响应状态
        if (!response.ok) {
            // 尝试解析错误信息
            const errorBody = await response.text();
            throw new Error(`HTTP 错误! 状态: ${response.status}. 详情: ${errorBody}`);
        }

        const result = await response.json();

        // 根据新的成功响应格式检查并提取图片URL
        if (result.images && Array.isArray(result.images) && result.images.length > 0 && result.images[0].url) {
            return result.images[0].url; // 返回生成的图片URL
        } else {
            // 如果响应结构不符合预期，或者API返回了其他错误信息
            // ModelScope的错误响应通常在 'message' 字段中
            const errorMessage = result.message || 'API返回了无效的数据格式或未包含图片URL';
            throw new Error(errorMessage);
        }

    } catch (error) {
        // 捕获所有异常并抛出一个统一格式的错误
        throw new Error(`图片生成失败: ${error.message}`);
    }
}

  


// 添加用户消息
function addUserMessage(message) {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message user-message';
    messageDiv.textContent = message;
    
    chatMessages.appendChild(messageDiv);
    scrollToBottom();
}

// 添加机器人消息
function addBotMessage(message) {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message bot-message';
    messageDiv.innerHTML = formatMessage(message);
    
    chatMessages.appendChild(messageDiv);
    scrollToBottom();
}

// 格式化消息（支持基本的HTML格式）
function formatMessage(text) {
    return marked.parse(text);
}


// 添加错误消息
function addErrorMessage(message) {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'error-message';
    messageDiv.innerHTML = `${message} <button class="retry-btn">重试</button>`;
    
    chatMessages.appendChild(messageDiv);
    scrollToBottom();
    
    // 重试按钮点击事件
    messageDiv.querySelector('.retry-btn').addEventListener('click', function() {
        messageDiv.remove();
        // 重新发送上一条消息（简化版，实际应用中需要保存上一条消息）
        alert('请重新输入您的问题');
    });
}

// 显示打字指示器
function showTypingIndicator() {
    typingIndicator.style.display = 'flex';
}

// 隐藏打字指示器
function hideTypingIndicator() {
    typingIndicator.style.display = 'none';
}

// 滚动到最底部
function scrollToBottom() {
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// 人物实例：自动生成详细讲解
function sendFigurePrompt({ name, era, focus }) {
    const userIntro = `想了解${name}（${era}）：请给出适合中小学生的系统讲解。`;
    const prompt = `请用适合中小学生的语言，按“四格卡片（生平线索—关键事件—地理关联—影响评价）”详细介绍${name}（${era}）。结合与“${focus}”相关的内容。要求：
- 用时间线与地图方位描述关键节点与地点
- 说明与自然地理/交通/城市发展的联系
- 给出3条易错点纠正与2个课堂练习题（含答案要点）
- 结尾用3句话总结人物影响`;
    addUserMessage(userIntro);
    showTypingIndicator();
    callAIModel(prompt, null)
        .then(resp => { hideTypingIndicator(); addBotMessage(resp); })
        .catch(err => { hideTypingIndicator(); addErrorMessage(err.message || '发生错误，请重试'); });
}





// 新增：处理山河画卷生成请求
async function generateLandscapeImage() {


    console.log("正在生成山河画卷...");
    // 预设一些与主题相关的提示词
    const landscapePrompts = [
        "中国水墨画风格，描绘黄山云海与奇松怪石，意境悠远",
        "壮丽的长江三峡，悬崖峭壁，江水奔腾，有孤帆远影",
        "桂林山水，漓江之上竹筏漂流，远处是典型的喀斯特地貌山峰，烟雨朦胧",
        "雪后的故宫角楼，红墙金瓦覆盖着白雪，古朴而静谧，体现中国古典建筑之美",
        "张掖丹霞地貌，色彩斑斓的山峦在夕阳下更加绚丽，光影效果突出",
        "一望无际的内蒙古呼伦贝尔大草原，蓝天白云，牧民和羊群点缀其间"
    ];

    // 随机选择一个提示词
    const prompt = landscapePrompts[Math.floor(Math.random() * landscapePrompts.length)];

    // 在聊天窗口显示用户的操作意图
    addUserMessage(`正在为您生成画卷：“${prompt}”`);
    showTypingIndicator();

    try {
        const imageUrl = await generateImage(apiKey, prompt);
        hideTypingIndicator();
        // 使用新函数来添加图片消息
        addBotImageMessage(imageUrl, prompt);
    } catch (error) {
        hideTypingIndicator();
        addErrorMessage(error.message || '图片生成失败，请重试');
    }
}

// 新增：添加包含图片和描述的机器人消息
function addBotImageMessage(imageUrl, caption) {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message bot-message';

    // 创建图片元素
    const img = document.createElement('img');
    img.src = imageUrl;
    img.alt = caption;
    img.style.maxWidth = '100%';
    img.style.borderRadius = '8px';
    img.style.marginTop = '8px';

    // 创建描述文本
    const p = document.createElement('p');
    p.textContent = `为您生成的画卷：“${caption}”`;

    messageDiv.appendChild(p);
    messageDiv.appendChild(img);

    chatMessages.appendChild(messageDiv);
    scrollToBottom();
}